<template>
	<view v-if="mask">
		<view class="container">
			<view class="content">
				<view class="main">
					<view class="mainTitle">
						<u-icon name="close" color="#323233" size="28" @click="$emit('close')"></u-icon>
						<text>筛选</text><!-- {{mask}} -->
					</view>
          <view class="mainBottom">
            <button type="default" class="no" @click="onClear">清除</button>
            <button type="default" class="ok" @click="onOk">确认</button>
          </view>
					<view class="mainList" v-for="(item,index) in list" :key="index">
						<view class="professional">
							<view class="professionalTitle">
								<text>{{item.name}}</text>
							</view>
              <scroll-view  scroll-y="true" class="scroll-Y">
                <view class="icon">
                  <text v-for="(a,b) in item.list" :key="b" @click="onSelect(item,b)"
                        :class="{active:item.index===b}">{{a.name}}</text>
                </view>
              </scroll-view>

						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		props: {
			//数据
			list: {
				type: Array,
				default: []
			},
		},
		data() {
			return {
				index: 0,
        mask:false,
			}
		},
		methods: {
			//点击某一项
			onSelect(item, b) {
				item.index = b
			},
			//重置
			onClear() {
				this.$emit('clear')
			},
			//确定
			onOk() {
				this.$emit('ok')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: fixed;
		top: 0;
		right: 0;
		width: 100%;
		height: 100vh;
		background: rgba(178, 178, 178, 0.3);
		z-index: 999;

		.content {
			position: fixed;
			top: 0;
			right: 0;
			width: 80%;
			height: 100vh;
			background: RGBA(255, 255, 255, 1);

			.main {
        max-height: 100%;
        overflow: hidden;
        overflow-y: scroll;
				.mainTitle {
					width: 100%;
					height: 88rpx;
					line-height: 88rpx;
          display: flex;
					.u-icon {
						height: 88rpx;
            width:0;
					}

					text {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #323233;
            text-align: center;
            flex:1;
					}
				}

				.mainList {
					.professional {
						margin: 30rpx 26rpx;

						.professionalTitle {
							margin-bottom: 12rpx;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #323233;
						}

						.icon {
							display: flex;
							white-space: nowrap;
							flex-wrap: wrap;
              max-height: 600rpx;
              overflow-y: scroll;
							.active {
								color: #FFFFFF;
								background: #52B9B1;
							}

							text {
								margin-top: 20rpx;
								margin-right: 20rpx;
								padding: 6rpx 10rpx;
								height: 50rpx;
								font-size: 26rpx;
								text-align: center;
								background: #F1F5F9;
								border-radius: 10rpx;
							}
						}
					}
				}

				.mainBottom {
					display: flex;
					button {
						flex-basis: 50%;
						border-radius: 0;
						background: #FFFFFF;
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 500;
					}

					.no {
						color: #52B8B2;
					}

					.ok {
						color: #FFFFFF;
						background: #52B9B1;
					}
				}
			}
		}
	}
</style>
